import React,{ Component }from 'react'
import CSSModules from 'react-css-modules'
import styles from './Home.css'

import Banner from 'component/Banner/Banner'


const bannerOption=[ 
    {
        id: 1, 
        bg: 'url(src/images/b1.jpg)',
    }, 
    { 
        id: 2,
        bg: 'url(src/images/b2.jpg)',
    },
    {
        id: 3,
        bg: 'url(src/images/b3.jpg)',
    },
    {
        id: 4,
        bg: 'url(src/images/b4.jpg)',
    },
];


const Home=React.createClass({
    getInitialState() {
        return{
            pColorR:Math.floor(Math.random()*255),
            pColorG:Math.floor(Math.random()*255),
            pColorB:Math.floor(Math.random()*255),
            borderColorR:Math.floor(Math.random()*255),
            borderColorG:Math.floor(Math.random()*255),
            borderColorB:Math.floor(Math.random()*255),
        }
    },
    componentDidMount() {
        setInterval(function () {
            this.setState({
                pColorR:Math.floor(Math.random()*255),
                pColorG:Math.floor(Math.random()*255),
                pColorB:Math.floor(Math.random()*255),
                borderColorR:Math.floor(Math.random()*255),
                borderColorG:Math.floor(Math.random()*255),
                borderColorB:Math.floor(Math.random()*255),
            })
        }.bind(this),1000) 
    },
  	render() {
  	    let pColor={
            color: "rgb(" +this.state.pColorR+","+this.state.pColorG+","+this.state.pColorB+")"
        }
        let infoStyle={
  	        borderColor: "rgb(" +this.state.borderColorR+","+this.state.borderColorG+","+this.state.borderColorB+")"
        }
    	return <div className="home">
                <Banner option={bannerOption} bannerHeight="600"/>
                <div styleName="base-info-wrap">
                    <div styleName="base-info" style={infoStyle}>
                        <p style={pColor}>
                            姓名：文帅
                        </p>
                        <p style={pColor}> 
                            性别：男
                        </p>
                        <p style={pColor}>
                            民族：汉 
                        </p>
                        <p style={pColor}>
                            出生日期：1993年11月27日
                        </p>
                        <p style={pColor}>
                            婚姻状况：未婚
                        </p>
                        <p style={pColor}>
                            专业：计算机多媒体技术与应用 
                        </p> 
                    </div>
                    <div styleName="base-info" style={infoStyle}>
                        <p style={pColor}>
                            体重：75kg
                        </p>
                        <p style={pColor}>
                            身高：178cm
                        </p>
                        <p style={pColor}>
                            身体情况：健康
                        </p>
                        <p style={pColor}>
                            毕业学校：南京广播电视大学
                        </p>
                        <p style={pColor}>
                            联系电话：18551876766 
                        </p>
                        <p style={pColor}>
                            邮箱：2423467330@qq.com
                        </p>
                    </div>
                </div>
    	</div>
  	}
});

export default CSSModules(Home,styles);
